<template>
	<div class="import-history">
		<div v-loading="loading" class="history-table">
			<el-empty v-if="historyList.length === 0" description="暂无导入历史记录" />

			<el-table
				v-else
				:data="historyList"
				style="width: 100%"
				border
				stripe
				:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
			>
				<el-table-column prop="id" label="ID" width="80" align="center" />
				<el-table-column prop="importTime" label="导入时间" width="160" />
				<el-table-column prop="subjectName" label="学科" width="100" />
				<el-table-column prop="className" label="班级" width="120" />
				<el-table-column prop="examType" label="考试类型" width="120">
					<template #default="scope">
						<el-tag :type="getExamTypeTag(scope.row.examType)" effect="plain">
							{{ formatExamType(scope.row.examType) }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="recordCount" label="记录数" width="100" align="center" />
				<el-table-column prop="importType" label="导入类型" width="120">
					<template #default="scope">
						<el-tag :type="getImportTypeTag(scope.row.importType)" effect="plain">
							{{ formatImportType(scope.row.importType) }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="importStatus" label="导入状态" width="100" align="center">
					<template #default="scope">
						<el-tag
							:type="scope.row.importStatus === 'success' ? 'success' : 'danger'"
							effect="plain"
						>
							{{ scope.row.importStatus === 'success' ? '成功' : '失败' }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="importUser" label="操作人" width="120" />
				<el-table-column label="操作" width="150" fixed="right">
					<template #default="scope">
						<el-button type="primary" link @click="viewDetails(scope.row.id)"> 查看详情 </el-button>

						<el-popconfirm
							title="确定要删除这条导入记录吗？"
							@confirm="deleteHistory(scope.row.id)"
						>
							<template #reference>
								<el-button type="danger" link> 删除 </el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="pagination-container" v-if="total > 0">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="[5, 10, 20, 50]"
				:small="true"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
				@size-change="loadHistoryList"
				@current-change="loadHistoryList"
			/>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineEmits } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const emit = defineEmits(['view-details'])

// 分页参数
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)

// 加载状态
const loading = ref(false)

// 历史记录列表
const historyList = ref<any[]>([])

// 加载历史列表
const loadHistoryList = async () => {
	loading.value = true

	try {
		// 这里应该调用API获取历史数据
		// 模拟API请求
		await new Promise((resolve) => setTimeout(resolve, 500))

		// 模拟数据
		historyList.value = [
			{
				id: 1,
				importTime: '2023-05-15 14:30:22',
				subjectName: '数学',
				className: '高一(1)班',
				examType: 'midterm',
				recordCount: 48,
				importType: 'new',
				importStatus: 'success',
				importUser: '张老师'
			},
			{
				id: 2,
				importTime: '2023-05-12 10:15:45',
				subjectName: '语文',
				className: '高二(2)班',
				examType: 'final',
				recordCount: 50,
				importType: 'update',
				importStatus: 'success',
				importUser: '李老师'
			},
			{
				id: 3,
				importTime: '2023-05-10 09:22:33',
				subjectName: '英语',
				className: '高三(1)班',
				examType: 'unit',
				recordCount: 45,
				importType: 'replace',
				importStatus: 'failed',
				importUser: '王老师'
			}
		]

		// 设置总数
		total.value = 3
	} catch (error) {
		console.error('加载历史记录失败:', error)
		ElMessage.error('加载历史记录失败')
		historyList.value = []
		total.value = 0
	} finally {
		loading.value = false
	}
}

// 格式化考试类型
const formatExamType = (type: string) => {
	const typeMap: Record<string, string> = {
		midterm: '期中考试',
		final: '期末考试',
		unit: '单元测试',
		homework: '平时作业',
		other: '其他'
	}

	return typeMap[type] || type
}

// 获取考试类型标签样式
const getExamTypeTag = (type: string) => {
	const typeTagMap: Record<string, string> = {
		midterm: 'warning',
		final: 'danger',
		unit: 'info',
		homework: 'success',
		other: ''
	}

	return typeTagMap[type] || ''
}

// 格式化导入类型
const formatImportType = (type: string) => {
	const typeMap: Record<string, string> = {
		new: '新增',
		update: '更新',
		replace: '替换'
	}

	return typeMap[type] || type
}

// 获取导入类型标签样式
const getImportTypeTag = (type: string) => {
	const typeTagMap: Record<string, string> = {
		new: 'success',
		update: 'warning',
		replace: 'danger'
	}

	return typeTagMap[type] || ''
}

// 查看详情
const viewDetails = (id: number) => {
	emit('view-details', id)
}

// 删除历史记录
const deleteHistory = async (id: number) => {
	try {
		// 这里应该调用API删除记录
		// 模拟API请求
		await new Promise((resolve) => setTimeout(resolve, 500))

		// 更新本地列表
		historyList.value = historyList.value.filter((item) => item.id !== id)
		total.value -= 1

		ElMessage.success('删除成功')
	} catch (error) {
		console.error('删除历史记录失败:', error)
		ElMessage.error('删除历史记录失败')
	}
}

// 组件挂载时加载数据
onMounted(() => {
	loadHistoryList()
})
</script>

<style lang="scss" scoped>
.import-history {
	width: 100%;

	.history-table {
		min-height: 150px;
	}

	.pagination-container {
		margin-top: 15px;
		display: flex;
		justify-content: flex-end;
	}
}
</style>
